// 页面底部组件，为什么要创建NavBar 因为要使用到images这些图片
<template>
  <ul class="nav-bar ul">
    <!-- key循环的每一个不同的 -->
    <router-link
      v-for="(item,index) in bars"
      :key="index"
      :class="item.id"
      :to="{ path: item.path }"
      tag="li"
      active-class="z-act"
    >
      <i class="img"></i>
      <!-- <span v-text="item.name"></span> -->
      <span>{{ item.name }}</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      bars: [
        {
          id: "NowPlay",
          path: "/home",
          name: "电影"
        },
        {
          id: "cinema",
          path: "/cinema",
          name: "影院"
        },
        {
          id: "group",
          path: "/group",
          name: "9.9拼团"
        },
        {
          id: "center",
          path: "/center",
          name: "个人中心"
        }
      ]
    };
  }
};
</script>
// scoped只对我当前的组件样式生效，如果有相同的类名都不会继承这里的样式
<style lang="scss" scoped>
@import "../../style/common/px2rem.scss";
.nav-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 540px;
  background: white;
  flex-shrink: 0; //不受兄弟挤压
  display: flex;
  height: px2rem(50);
  border-top: px2rem(2) solid #ededed;
  border-bottom: px2rem(1) solid #ededed;
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: px2rem(12);
    &.z-act {
      color: rgb(255, 127, 69);
    }
    img {
      width: px2rem(21);
      height: px2rem(21);
      margin-bottom: px2rem(3);
    }
    .img {
      display: block; // i标签行内元素
      width: px2rem(21);
      height: px2rem(21);
      margin-bottom: px2rem(3);
      background-size: 100%;
    }
    &.NowPlay {
      .img {
        background-image: url("./images/films.png");
      }
      &.z-act .img {
        background-image: url("./images/films_on.png");
      }
    }
    &.cinema {
      .img {
        background-image: url("./images/cinemas.png");
      }
      &.z-act .img {
        background-image: url("./images/cinemas_on.png");
      }
    }
    &.group {
      .img {
        background-image: url("./images/uugroupon.png");
      }
      &.z-act .img {
        background-image: url("./images/uugroupon.png");
      }
    }
    &.center {
      .img {
        background-image: url("./images/center.png");
      }
      &.z-act .img {
        background-image: url("./images/center_on.png");
      }
    }
  }
}
</style>
